<style scoped>
.a1 {
  height: 1100px;
  background: rgba(53, 53, 53, 0.8);
  width: 700px;
  margin-left: 750px;
  border-radius: 10px;
  box-sizing: border-box;
  position: absolute;
  z-index: 0;

}

.head1 {
  height: 50px;
  color: white;
  border-radius: 10px;
  box-sizing: border-box
}
.head2 {
  position: absolute;
  z-index: 3;
  height: 50px;
  width: 60px;
  font-size: large;
  margin-top: 10px;
  margin-left: 610px;
}

el-link {
  font-size: 30px;
  margin-top: 10px;
  color: #dbe3df;
}

.head5 {
  height: 80px;
  width: 700px;
  background: #353535;
  z-index: 1;
  margin-top: 990px;
  box-sizing: border-box;
  border-top-color: white;
}

.age3 {
  width: 140px;
  height: 80px;
  float: left;
  padding-top: 10px;
}

.head3 {
  border-radius: 25px;
  height: 790px;
  width: 700px;
  margin-top: 210px;
  background: #353535;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  border-bottom-color: white;
}

.head4 {
  border-radius: 25px;
  position: absolute;
  z-index: 2;
  margin-top: 0px;
  width: 700px;
  background: rgba(53, 53, 53, 0.76);
  box-sizing: border-box;
  border-bottom-color: white;
}

.horizontal-texts {
  margin-top: 50px;
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  width: 350px;
  font-size: 23px;
  color: white;
  margin-left: 280px;
}

.el-icon-share {
  position: absolute;
  z-index: 4;
  font-size: 30px;
  color: white;
  margin-top: 10px;
  margin-right: 20px;
}
.sidebar {
  position: absolute;
  width: 350px;
  height: 1050px;
  background-color: #f4f4f4;
  //box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); /* 调整阴影方向 */
  z-index: 1000;
  transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
  transform: translateX(100%); /* 默认隐藏在右侧 */
}

.sidebar.open {
  transform: translateX(0); /* 显示时平滑展开 */
}

.overlay {
  bottom: 0;
  height: 96%;
  width: 350px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.van{
  line-height: 40px;
  font-size: 26px;
}
</style>
<template>
  <div class="a1">
    <div class="head1"><img src="../assets/img.png" width="700px" height="50px" style="border-radius: 10px"></div>
    <div class="head2"><span @click="toggleSidebar()" style="font-size: 50px;color: white;cursor: pointer;">≡</span> </div>

    <div class="head3">
      <div class="horizontal-texts">
        <div style="margin-right: 30px;">获赞
          <p style="font-size : 30px;">28.8w</p></div>
        <div
            style="padding-left: 40px; padding-right: 40px; border-right: 1px solid gray; height: 70px; border-left: 1px solid gray;">
          粉丝
          <p style="font-size : 30px;">9.8w</p></div>
        <div style="margin-left: 30px;">关注
          <p style="font-size : 30px;">999</p></div>
      </div>
      <div class="head4">
        <van-skeleton avatar :rows="1" avatar-size="160px"/>
        <div>
          <h6 style="margin-top: 5px; margin-bottom: 0px; font-size: 35px;color: white; float: left;">彬准研究所</h6>
          <br><br><br>
          <p style="margin-top: 5px; font-size: 20px;color: gray; float: left;">抖音号：soojun </p><br><br><br>
          <p>
            <van-tag plain type="primary" size="large" text-color="black">彬准</van-tag>
            <van-tag plain type="primary" size="large" text-color="black">30岁</van-tag>
            <van-tag plain type="primary" size="large" text-color="black">广东·深圳</van-tag>
          </p>
        </div>
      </div>
      <van-divider
          :style="{ color: 'rgba(53, 53, 53, 0.76)', fontSize: '16px', marginTop: '360px' }"
      >
      </van-divider>

      <!--导航栏-->
      <van-tabs v-model="active" background="#353535" color="white" style="width: 700px;">
        <van-tab title="作品0" title-style="color: white; font-size: 20px;">内容 1</van-tab>
        <van-tab title="动态0" title-style="color: white; font-size: 20px;">内容 2</van-tab>
        <van-tab title="喜欢588" title-style="color: white; font-size: 20px;">内容 3</van-tab>
      </van-tabs>
    </div>
    <div class="head5">
      <div class="age3">
        <el-link @click="sy()">首页</el-link>
      </div>
      <div class="age3">
        <el-link @click="py()">朋友</el-link>
      </div>
      <div class="age3"><img src="../assets/img_3.png" width="60px" height="55px"></div>
      <div class="age3">
        <el-link @click="xx()">消息</el-link>
      </div>
      <div class="age3">
        <el-link>我的</el-link>
      </div>
    </div>
    <!-- 侧边栏 -->
    <div class="sidebar" v-if="isSidebarOpen">
      <van-sidebar v-model="activeKey" style="width: 350px;">
        <van-sidebar-item class="van" title="我的订单" to="/myOrder" />
        <van-sidebar-item class="van" title="我的收藏" to="/xx" />
        <van-sidebar-item class="van" title="我的二维码" to="/xx" />
        <van-sidebar-item class="van" title="钱包" to="/xx" />
        <van-sidebar-item class="van" title="功能" to="/xx" />
        <van-sidebar-item class="van" title="私密作品" to="/xx" />
        <van-sidebar-item class="van" title="创作者服务中心" to="/xx" />
        <van-sidebar-item class="van" title="未成年保护工具" to="/xx" />
        <van-sidebar-item class="van" title="设置" to="/xx" />
      </van-sidebar>
    </div>

    <!-- 点击空白处关闭侧边栏的遮罩层 -->
    <div class="overlay" v-if="isSidebarOpen==true" @click="closeSidebar()"></div>
  </div>
</template>

<script>
import Vue from 'vue';
import Vant from 'vant';
import {Notify} from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
export default {
  data() {
    return {
      active: 2,
      activeKey: 0,
      isSidebarOpen: false, // 控制侧边栏的显示和隐藏
    }
  },
  methods: {
    onChange(index) {
      Notify({type: 'primary', message: index});
    },
    py() {
      this.$router.push('/py')
    },
    xx() {
      this.$router.push('/xx')
    },
    wd() {

    },
    sy() {
      this.$router.push('/')
    },
    toggleSidebar() {
      this.isSidebarOpen = true;
      console.log('toggleSidebar called, isSidebarOpen:', this.isSidebarOpen);
    },
    closeSidebar() {
      this.isSidebarOpen = false;
      console.log('closeSidebar called, isSidebarOpen:', this.isSidebarOpen);
    },
    handleDocumentClick(event) {
      // 检查点击的目标是否在侧边栏内
      if (this.isSidebarOpen && !event.target.closest('.sidebar')) {
        // this.closeSidebar();
      }
    }
  },
  mounted() {
    // 监听文档的点击事件
    document.addEventListener('click', this.handleDocumentClick);
  },
  beforeDestroy() {
    // 移除文档的点击事件监听器
    document.removeEventListener('click', this.handleDocumentClick);
  },
  created() {

  }
}
</script>

